<template>
    <div class="mydiv">
        AsyncComponent
        <h3>我是AsyncComponent组件</h3>
        <button @click="myFun">event</button>
        <p ref="p">hello</p>
        <Suspense>
            <template #default>
                <child/>
            </template>
            <template #fallback>
                稍等...加载中...
            </template>
        </Suspense>
    </div>
</template>

<script setup>
// import child from './child.vue';  //传统的静态引入
import {ref, defineAsyncComponent,onMounted } from 'vue'

const p =ref(null)
onMounted(() => {
console.log(p.value);  
p.value.style.backgroundColor='red'
});
const child = defineAsyncComponent(() =>
  import('./child.vue')  //异步的引用
)

function myFun(event) {
    console.log(event.target);
    event.target.style.backgroundColor='red'
}
</script>

<style  scoped>
.mydiv{background-color: #4fb99b;padding: 10px;}
</style>